<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/car.css">
    <link rel="stylesheet" href="../css/pub.css">
</head>

<body>
    <div class="head">
        <div class="head-top">
            <div class="welcome">爱书的朋友们，欢迎来淘书！</div>
            <ul>
                <li>
                    <a href="../index.html">首页</a>
                    <a href="login.html">我的淘书</a>
                    <a href="car.html">购物车</a>
                    <a href="build.html">帮助中心</a>
                    <a href="">400-8888-184</a>
                </li>
            </ul>
        </div>
    </div>
    <header class="header">
        <div class="w">
            <div class="logo"><img src="../static/img/taoshu-logo.jpg" alt=""></div>
            <div class="search">
                <input type="text" placeholder="请输入关键词" id="txt1"><input type="button" value="搜索" id="sea">
            </div>
        </div>
    </header>
    <nav class="nav">
        <div class="w">
            <ol>
                <li><a href="list.html">文学</a></li>
                <li><a href="list.html">小说</a></li>
                <li><a href="list.html">传记</a></li>
                <li><a href="list.html">艺术</a></li>
                <li><a href="list.html">收藏/鉴赏</a></li>
                <li><a href="list.html">经济管理</a></li>
                <li><a href="list.html">自我实现/励志</a></li>
                <li><a href="list.html">考试</a></li>
                <li><a href="list.html">青春文学</a></li>
                <li><a href="list.html">散文随笔</a></li>
            </ol>
        </div>
    </nav>
    <div class="article">
        <div class="w">
            <h3>我的购物车 <span><a href="../index.html">返回首页</a></span></h3>
            <table style="text-align: center;">
                <thead>
                    <tr>
                        <th>淘书图书</th>
                        <th>图书名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计(元)</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <input type="button" value="去结算" id="btn">
        </div>
    </div>
    <style>
        .article #btn {
            float: right;
            width: 120px;
            height: 40px;
            border: 0;
            outline: none;
            background-color: goldenrod;
            font-size: 20px;
        }
    </style>
    <footer class="footer">
        <div class="w">
            <div class="footer-nav">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购物流程</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">积分说明</a></dd>
                    <dd><a href="">我的订单</a></dd>
                    <dd><a href="">关于特价书</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="">派送时间和运费</a></dd>
                    <dd><a href="">验货与签收</a></dd>
                    <dd><a href="">订单配送查询</a></dd>

                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">邮局汇款</a></dd>
                    <dd><a href="">银行转账</a></dd>
                    <dd><a href="">账户余额</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">退换货流程</a></dd>
                    <dd><a href="">退换货申请</a></dd>
                    <dd><a href="">退款说明</a></dd>
                    <dd><a href="">申请余额提现</a></dd>
                </dl>
                <dl>
                    <dt>帮助信息</dt>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">找回密码</a></dd>
                    <dd><a href="">汇款单招领</a></dd>
                    <dd><a href="">联系客服</a></dd>
                </dl>
            </div>
            <div class="cooper">
                <span class="Company">合作单位： </span>
                <ul>
                    <li><a href="">读书网</a></li>
                    <li><a href="">中国网读书频道</a></li>
                    <li><a href="">起点中文网</a></li>
                    <li><a href="">人大经济网</a></li>
                    <li><a href="">杂志网</a></li>
                    <li><a href="">大佳网</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                </ul>
            </div>
            <div class="footer-copy">
                <ul>
                    <li><a href="">关于淘书</a></li>
                    <li><a href="">数目清单</a></li>
                    <li><a href="">网站联盟</a></li>
                    <li><a href="">免费条款</a></li>
                    <li><a href="">数据API</a></li>
                    <li><a href="">友情链接</a></li>
                </ul>
                <ul>
                    <li>Copyright &copy;2012-2015淘书网Taoshu.com版权所有 </li>
                    <span>|</span>
                    <li>京ICP备12020895出版物经营许可证 新出发京零字第朝110069号</li>
                </ul>
            </div>

        </div>
    </footer>
</body>
<script>
    class Car {
        constructor() {
            this.tBody = document.querySelector("tbody");
            this.getData();
            this.addEvent();

        }
        getData() {
            if (localStorage.getItem("goodsMsg")) {
                this.gm = JSON.parse(localStorage.getItem("goodsMsg"));
            } else {
                this.gm = [];
            }
            // console.log(gm);
            this.display();
        }
        display() {
            // console.log(typeof this.gm);
            var str = "";
            for (var i = 0; i < this.gm.length; i++) {
                str += ` <tr index="${this.gm[i].goodsId}">
                        <td><img src="${this.gm[i].msg.img}" alt=""></td>
                        <td>${this.gm[i].msg.name}</td>
                        <td>${this.gm[i].msg.taoshu}</td>
                        <td><input type="number" min="1" value="${this.gm[i].num}" class="number"></td>
                        <td>${this.gm[i].msg.taoshu * this.gm[i].num}</td>
                        <td class="delete">删除</td> 
                    </tr>`;

            }
            this.tBody.innerHTML = str;
        }
        addEvent() {
            var that = this;
            this.tBody.onclick = function(eve) {
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if (tar.className === "delete") {
                    // console.log(1);
                    that.id = tar.parentNode.getAttribute("index");
                    tar.parentNode.remove();
                    that.removeData(function(i) {
                        that.gm.splice(i, 1);
                    });
                }
            }
            this.tBody.oninput = function(eve) {
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if (tar.className === "number") {
                    that.id = tar.parentNode.parentNode.getAttribute("index");
                    that.removeData(function(i) {
                        that.gm[i].num = tar.value;
                    })
                    tar.parentNode.nextElementSibling.innerHTML = tar.value * tar.parentNode.previousElementSibling.innerHTML;
                }
            }
        }
        removeData(cb) {
            for (var i = 0; i < this.gm.length; i++) {
                if (this.gm[i].goodsId === this.id) {
                    cb(i);
                    break;
                }
            }
            localStorage.setItem("goodsMsg", JSON.stringify(this.gm));
        }
    }
    new Car();
</script>

</html>